<template>
  <div>
    我是hello，我有点困
    <!-- 路由的内置组件 -->
    <!-- to：跳转地址 必填属性，不写会报错 -->
    <!-- tag：以什么标签展示 -->
    <!-- replace:以新的地址替换当前地址，不会生成新的历史记录，始终以有一条 -->
    <!-- active-class:当页面地址和链接地址相同时，会添加一个class，通过这个class可以高亮显示当前链接 -->
    <br>
    <!-- <router-link to="/index" active-class="aaa">index</router-link> -->
    <router-link :to="{name: 'aaaa'}" active-class="aaa">index</router-link>
    <br>
    <router-link :to="{path: '/layout/son2'}" active-class="aaa">son2(子路由)</router-link>
    <!-- 命名路由：给路由对象添加名字，通过name属性跳转。用比较短的name代替比较长的path -->
    <router-link :to="{name: 's2'}" active-class="aaa">son2(子路由)</router-link>
    <br>
    <router-link to="/hello" active-class="aaa">hello</router-link>
    <p>{{$route.query.name}}</p>
    <hr>
    <button @click="jump('/index')">index</button>
    <button @click="jump('/hello')">hello</button>
  </div>
</template>

<script>
export default {
  created() {
    document.title = this.$route.meta.title
  },
  mounted() {
    // query查询参数，位于url的问号后面
    console.log(this.$route.query.time);
    console.log(this.$route.query.name);
  },
  methods: {
    jump(url) {
      // this.$router.push(url); // push是在数组的最后新增一个记录
      // this.$router.replace(url) // replace是替换上一条历史记录
      this.$router.go(-1);  // go(数字) ，大于零就是前进；小于零是后退

    }
  }
}
</script>

<style>

</style>